<div class="bg-white my-4 p-4"
     x-data="{open: false}"
     x-init="@this.on('close', () => { open = false })">
    <div>
        <x-jet-label>{{ __('Tags') }}</x-jet-label>
        @foreach($tags as $tag)
            <span class="inline-block my-2 bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">
                {{$tag['name']}}
                <i class="fa fa-close cursor-pointer" wire:click.stop="remove('{{ $tag['name'] }}')"></i>
            </span>
        @endforeach
        <div
                class="cursor-pointer inline-block my-2 bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2"
                @click="open = !open"
                x-show="!open"
            >
            <i class="fa fa-plus"></i>
        </div>
            <div class="max-w-md inline-flex" x-show="open">
                <div class="flex items-center border-b border-b-2 border-indigo-500 py-1">
                    <input wire:model.lazy="tag" class="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none" type="text" placeholder="添加新标签" aria-label="添加新标签">
                    <button wire:click="save"
                            class="flex-shrink-0 bg-indigo-500 disabled:opacity-25 border-indigo-500 hover:bg-indigo-700 hover:border-indigo-500 outline-none focus:outline-none text-sm border-0 text-white py-1 px-2 rounded"
                            type="button"
                            wire:loading.attr="disabled"
                    >
                        {{__('Add')}}
                    </button>
                    <button @click="open = false" class="flex-shrink-0 border-transparent border-2 text-indigo-500 hover:text-indigo-800 text-sm py-1 px-2 rounded outline-none focus:outline-none" type="button">
                        {{__('Cancel')}}
                    </button>
                </div>
                <div class="inline-flex">
                    <x-jet-input-error for="tag" class="mt-2 text-xs" />
                </div>

            </div>
    </div>


</div>
